<!--
 * @Description:日期选择
 * @Author: ningjz
 * @Date: 2023-11-06 16:31:37
 * @LastEditTime: 2025-07-07 09:53:11
-->
<template>
  <div class="dateSelection-box">
    <div class="date-select date-select-zIndex" @click="handDateClick">
      时间 <br />
      选择
    </div>
    <div class="date-box date-select-zIndex">
      <div class="date-start">
        <span>{{ dateState.startDate }}</span>
      </div>
      <div class="date-start">&nbsp;至&nbsp;</div>
      <div class="date-end">
        <span>{{ dateState.endDate }}</span>
      </div>
    </div>
    <div class="select-box date-select-zIndex" v-if="dateState.dateVisible">
      <div class="box-title">时间选择</div>
      <div class="box-date">
        <div class="box-date-input">
          <div class="box-date-item">
            <div class="box-date-label">日期</div>
            <!-- <el-input
              v-model="dateState.dateStart"
              placeholder=""
              disabled
              :suffix-icon="Calendar"
            /> -->
            <el-date-picker
              v-model="dateState.dateStart"
              type="date"
              placeholder="开始日期"
              value-format="YYYY-MM-DD"
            />
          </div>
          <div class="box-date-item">
            <div class="box-date-label">至</div>
            <!-- <el-input
              v-model="dateState.dateEnd"
              placeholder="结束日期"
              disabled
              :suffix-icon="Calendar"
            /> -->
            <el-date-picker
              v-model="dateState.dateEnd"
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
            />
          </div>
        </div>
      </div>
      <div class="box-btn">
        <div class="btn-item" @click="handSelect('close')">取消</div>
        <div class="btn-item" @click="handSelect('confirm')">确定</div>
      </div>
    </div>
    <div
      class="date-select-back"
      v-if="dateState.dateVisible"
      @click="handSelect('close')"
    ></div>
  </div>
</template>
<script setup lang="ts">
import { getDefaultDate } from '@/utils/date'
import { getStartDate, setStartDate } from '@/utils/auth'
import { reactive, inject } from 'vue'
// 日期
const dateState: any = reactive({
  dateStart: '',
  dateEnd: '',
  dateVisible: false,
  isDropdownVisible: true,
  startDate: '',
  endDate: getDefaultDate(0)[1],
  store: inject('store'),
  getData: () => {
    if (!getStartDate()) {
      setStartDate(getDefaultDate(180)[0])
      dateState.store.commit('changeDate', {
        startDate: getDefaultDate(180)[0],
        endDate: dateState.endDate
      })
    } else {
      dateState.store.commit('changeDate', {
        startDate: getStartDate(),
        endDate: dateState.endDate
      })
    }
    const date = dateState.store.state.globalDate
    if (date.startDate || date.endDate) {
      dateState.startDate = getStartDate()
      dateState.endDate = date.endDate
    } else {
      dateState.store.commit('changeDate', {
        startDate: dateState.startDate,
        endDate: dateState.endDate
      })
    }
  }
})
const handDateClick = () => {
  dateState.dateVisible = !dateState.dateVisible
  if (dateState.dateVisible) {
    dateState.dateStart = dateState.startDate
    dateState.dateEnd = dateState.endDate
  }
}
const handSelect = (val: string) => {
  if (val == 'confirm') {
    dateState.startDate = dateState.dateStart
    dateState.endDate = dateState.dateEnd
    dateState.store.commit('changeDate', {
      startDate: dateState.startDate,
      endDate: dateState.endDate
    })
    handSelect('close')
  } else {
    dateState.dateVisible = false
  }
}
dateState.getData()
</script>

<style lang="less" scoped>
.dateSelection-box {
  position: absolute;
  width: 330px;
  top: 4px;
  left: 1397px;
  height: 51px;
  .date-select {
    cursor: pointer;
    background: url('../img/date-bg.png') no-repeat;
    background-size: 100% 100%;
    height: 100%;
    position: absolute;
    font-size: 14px;
    font-family: 'AliHYAiHei';
    color: #ffffff;
    width: 67px;
    height: 67px;
    left: -62px;
    top: 3px;
    padding-top: 5px;
    text-align: center;
  }
  .date-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #31fdff;
    line-height: 26px;
    font-size: 16px;
    padding-top: 4px;
    div {
      line-height: 16px;
      font-family: 'AliHYAiHei';
      font-size: 22px;
    }
    span {
      white-space: nowrap;
      display: inline-block;
      line-height: 16px;
      font-family: 'AliHYAiHei';
      font-size: 20px;
      width: 140px;
      text-align: right;
    }
  }
  .select-box {
    background: url('../img/dateSelect-bg.png') no-repeat;
    width: 335px;
    height: 232px;
    position: absolute;
    top: 63px;
    left: -63px;
    padding: 25px;
    .box-title {
      font-size: 22px;
      font-family: 'Microsoft YaHei';
      color: rgb(255, 255, 255);
    }
    .box-date-input {
      display: flex;
      flex-direction: column;
      .box-date-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 10px;
        .box-date-label {
          width: 35%;
          font-size: 19px;
          font-family: 'Microsoft YaHei';
          color: rgb(255, 255, 255);
          text-align: right;
          padding-right: 15px;
        }
        ::v-deep(.el-input__wrapper) {
          background-color: transparent;
          font-size: 19px;
        }
        ::v-deep(.el-input) {
          font-size: 17px;
          --el-input-border-radius: 5px;
          --el-input-hover-border: rgb(33, 122, 255);
          --el-input-text-color: rgba(183, 207, 255, 0.6);
          --el-input-hover-border-color: rgb(33, 122, 255);
          --el-input-placeholder-color: rgba(183, 207, 255, 0.6);
          --el-input-clear-hover-color: rgb(33, 122, 255);
          .el-input__inner {
            padding-left: 42px;
            border: 2px solid #1961cb;
          }
          ::placeholder {
            font-size: 14px;
          }
        }
      }
    }
    .box-btn {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 54%;
      margin: 0 auto;
      .btn-item {
        border-radius: 5px;
        background-color: rgb(15, 160, 227);
        width: 68px;
        height: 29px;
        font-size: 16px;
        line-height: 29px;
        font-family: 'Microsoft YaHei';
        color: rgb(255, 255, 255);
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .select-box::before {
    content: url(../img/pull.png);
    top: -17px;
    position: absolute;
    left: 21px;
  }
  .box-date {
    display: flex;
    width: 280px;
    padding: 15px 0 15px 15px;
    .box-btn {
      height: auto;
    }
    ::v-deep(.el-input .el-input__inner) {
      border-radius: 5px;
    }
  }
  .box-dropdown {
    position: absolute;
    top: 68px;
    left: -204px;
    background: #f0f;
    display: flex;
    .box-dropdown-date {
      width: 322px;
    }
  }
}
.date-select-zIndex {
  z-index: 999;
}
.date-select-back {
  z-index: 99;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
<style>
.box-dropdown-date-popper .el-popper__arrow::before {
  opacity: 0;
}
</style>
